<template>
	<view>
		<view style="width: 100%;background-color: #ccc;margin-top: 20px;padding-top: 30px;">
			<carDetails :carList='carList'></carDetails>
		</view>
	</view>
</template>

<script>
	import carDetails from '../component/carDetails/carDetails.vue'
	export default {
		components: {
			carDetails
		},
		data() {
			return {
				carList: {
					icon: {
						name: "iconzuse",
						color: "#2AA845"
					},
					title: "系统阻塞",
					data: [{
							name: "变速箱油",
							total: "500",
							newNum: "120",
							time: "3",
							backColor: "#2AA845",
							oneKm: "6",
							nowKm: '3',
							width: ""
						},
						{
							name: "变速箱油",
							total: "1000",
							newNum: "1000",
							time: "3",
							oneKm: "6",
							nowKm: '3',
							backColor: "#2AA845",
							warnColoe: 'rgb(252, 43, 39,0.2)',
							width: ""
						},
						{
							name: "变速箱油",
							total: "500",
							newNum: "120",
							time: "3",
							oneKm: "6",
							nowKm: '3',
							width: ""
						},
					]

				}
			};
		},
		created() {
			this.carList.data.forEach(item => {
				item.width = item.newNum / item.total * 100 >= 100 ? '100%' : item.newNum / item.total * 100 +
					'%'
				if (item.newNum / item.total * 100 >= 100) {
					item.name = item.name + ' 建议立即更换'
					item.backColor = '#FC2B27'
					item.warnColoe = 'rgb(252, 43, 39,0.2)'
					this.carList.upkeep = true
					this.carList.upkeepName = '到保养期'
					item.upkeep = true
				}
			})
		}
	}
</script>

<style lang="scss">

</style>
